<template>
	<view class="card p-30">
		<view class="card_head mb-40">
			<text>报告主要内容</text>
		</view>
		
		<view class="list d-flex">
			<view v-for="(item, index) of list" :key="index" :class="['list_item d-flex', 'mr-30', [3, 4].includes(index) ? '' : 'mb-30']">
				<image mode="widthFix" class="list_item_icon mr-10" :src="`/static/image/second/icon${index + 1}.svg`" />
				<text class="list_item_title">{{ item }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	
	const list = reactive(['基本信息', '不良记录', '法院案件', '失信案件', '执行案件'])
</script>

<style lang="scss" scoped>
		.card {
			&_head {
				flex-direction: row;
				justify-content: center;
				align-items: center;
				
				text {
					color: #404040;
					font: {
						size: 32rpx;
						weight: bold;
					}
				}
			}
			
			.list {
				flex-direction: row;
				flex-wrap: wrap;
				&_item {
					align-items: center;
					justify-content: center;
					flex-direction: row;
					width: calc(100% / 3 - 20rpx);
					height: 90rpx;
					border-radius: 14rpx;
					background: linear-gradient(to right, #F3F5FE, #FEF5F8);
					&:nth-of-type(3n + 3) {
						margin-right: 0 !important;
					}
					&_icon {
						width: 35rpx;
					}
					&_title {
						font: {
							size: 23rpx;
						}
					}
				}
			}
		}
</style>
